import styled from 'styled-components';
const Wrapper =styled.div`
    margin-top:15px; 
    display:flex;
    border-radius:5px;
    box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
    align-items:center;
    padding:5px;
    white-space:nowrap;
    align-items:center;
    >.in-title,.out-title{
        border-radius: 5px; 
        padding:5px 10px;
        color:#f1ebeb;
        box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
        margin-right:10px;
    }
    >.in-title{
        background-color:#158f10;
    }
    >.out-title{
        background-color:#b15140;
    }
    >.notes{
        flex-grow:1;
        display:flex;
        align-items:center;
        >.notes-title{
            font-weight:600;
        }
        >.notes-content{
            white-space:pre-wrap;
            overflow:auto;
            max-height:50px;
        }   
    }
    >.money{
        font-size:18px;
        margin-right:10px;
        margin-left:10px;
        font-weight:600;
    }
`

type money={
    theme:string,
    note:string,
    money:number,
}
type value={
    money:money,
    key:number,

}
const Zgn_money=(props:value)=>{
    return(
        <Wrapper>
            {props.money.theme==='支出'?<div className="out-title">{props.money.theme}</div>
                                        :<div className="in-title">{props.money.theme}</div>}
            
            <div className='notes'>
                <div className='notes-title'>备注：</div>
                <div className='notes-content'>{props.money.note}</div>
            </div>
            <div className='money'>{'￥'+props.money.money}</div>
        </Wrapper>
    )
}

export default Zgn_money;